<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>手风琴菜单</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul li {
                list-style: none;
            }
            body{
                background-color: pink;
            }
            .sfq{
                background-color: white;
                width: 300px;
                margin:100px auto;
                border-radius: 5px;
            }
            .sfq ul {
                display: none;
            }
            .sfq ul li {
                height:35px;
                line-height: 35px;
                text-indent: 20px;
                background-color: red;
                margin-bottom: 1px;
            }
            .sfq ul li:hover {
                background-color: white;
            }
            .sfq .title {
                background-color: yellow;
                color:blue;
                margin-bottom: 1px;
                border-radius: 5px;
            }
            .sfq .title p {
                cursor: pointer;
                height: 35px;
                line-height: 35px;
                text-indent: 10px;
            }
        </style>
        <script src="jquery-1.12.1.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                var $title = $('.title');
                $title.on('click',function(){
                    var $this = $(this);
                    $this
                        .find('ul').slideToggle()
                        .end()
                        .siblings()
                        .find('ul').slideUp();
                })
            });
        </script>
    </head>
    <body>
        <div class="sfq">
            <div class="title">
                <p>css课程</p>
                <ul>
                    <li>课程1</li>
                    <li>课程2</li>
                    <li>课程3</li>
                    <li>课程4</li>
                    <li>课程5</li>
                </ul>
            </div>
            <div class="title">
                <p>html课程</p>
                <ul>
                    <li>课程1</li>
                    <li>课程2</li>
                    <li>课程3</li>
                    <li>课程4</li>
                    <li>课程5</li>
                </ul>
            </div>
            <div class="title">
                <p>css3课程</p>
                <ul>
                    <li>课程1</li>
                    <li>课程2</li>
                    <li>课程3</li>
                    <li>课程4</li>
                    <li>课程5</li>
                </ul>
            </div>
            <div class="title">
                <p>html5课程</p>
                <ul>
                    <li>课程1</li>
                    <li>课程2</li>
                    <li>课程3</li>
                    <li>课程4</li>
                    <li>课程5</li>
                </ul>
            </div>
            <div class="title">
                <p>jQuery课程</p>
                <ul>
                    <li>课程1</li>
                    <li>课程2</li>
                    <li>课程3</li>
                    <li>课程4</li>
                    <li>课程5</li>
                </ul>
            </div>
            <div class="title">
                <p>JS课程</p>
                <ul>
                    <li>课程1</li>
                    <li>课程2</li>
                    <li>课程3</li>
                    <li>课程4</li>
                    <li>课程5</li>
                </ul>
            </div>
        </div>

    
    </body>
</html>